<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件语法糖分离版本</title>
</head>
<body>

<div id="app">
  <!--  2、使用组件-->
  <my-div1></my-div1>
  <my-div2></my-div2>
</div>

<!--
■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法
■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。
■Vue提供了两种方案来定义HTML模块内容:
  口使用<script>标签
  口使用<template>标签
-->

<!--在模板中的标签内容，如果是多个标签内容，必须在标签的最外层包裹一个父类标签，所有的标签都必须放在父类标签中，否则报错
这里是<div>作为父类标签 ，即使是之前js中定义绑定标签内容的方式也得遵循多标签内容外部必须包裹一个父类标签，也就是说做外层
只能有一个标签作为根标签-->
<!--第一种写法：template标签-->
<template id="myDiv1">
  <div>
    <h2>我是标题1</h2>
    <p>我是内容1</p>
  </div>
</template>

<!--第二种写法：script标签，注意类型必须是text/x-template-->
<script type="text/x-template" id="myDiv2">
  <div>
    <h2>我是标题2</h2>
    <p>我是内容2</p>
  </div>`
</script>

<script src="../js/vue.js"></script>
<script>

  // ■【注册全局组件的语法糖】
  // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象，
  // 组件对象有一个template属性，属性值为绑定template标签或script标签的id
  Vue.component('myDiv1', {
    template: "#myDiv1"
  })

  //■【注册局部组件的语法糖】
  const app = new Vue({
    el: "#app",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    // 构造的组件有一个template属性，值为要绑定的template标签或script标签的id
    components: {
      myDiv2: {
        template: '#myDiv2'
      }
    }
  });
</script>


</body>
</html>